<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="J901.js"></script>
	</head>
	<body class="p-10">
		<h1>综合练习</h1>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>变量定义</h3>
					<button onclick="test1001()">var 全局变量</button>
					<button onclick="test1002()">let 块变量</button>
					<button onclick="test1003()">const 常量</button>
					<button onclick="test1004()">数组定义</button>
					<button onclick="test1005()">对象定义</button>
					<button onclick="test1006()">函数定义</button>
					<button onclick="test1007()">...扩展运算符</button>
					<button onclick="test1008()">...剩余参数</button>
					<button onclick="test1009()">?.可选链运算符</button>
				</section>
				<section>
					<h3>解构赋值</h3>
					<button onclick="test1101()">数组结构赋值</button>
					<button onclick="test1102()">对象结构赋值</button>
					<button onclick="test1103()">赋值给已有变量</button>
				</section>
				<section>
					<h3>数据类型</h3>
					<button onclick="test1201()">Number 数值型</button>
					<button onclick="test1202()">String 字符串</button>
					<button onclick="test1203()">Boolean 布尔值</button>
					<button onclick="test1204()">undefined 未定义</button>
					<button onclick="test1205()">null 空引用</button>
					<button onclick="test1206()">Symbol</button>
				</section>
				<section>
					<h3>流程控制</h3>
					<button onclick="test1301()">if else</button>
					<button onclick="test1302()">switch</button>
					<button onclick="test1303()">while</button>
					<button onclick="test1304()">for</button>
					<button onclick="test1305()">for in</button>
					<button onclick="test1306()">for of</button>
					<button onclick="test1307()">forEach()</button>
					<button onclick="test1308()">迭代器 iterator</button>
				</section>
				<section>
					<h3>函数</h3>
					<button onclick="test1401()">普通函数</button>
					<button onclick="test1402()">嵌套函数</button>
					<button onclick="test1403()">箭头函数</button>
					<button onclick="test1404()">回调函数</button>
					<button onclick="test1405()">递归调用</button>
					<button onclick="test1406()">不定参数</button>
					<button onclick="test1407()">默认参数</button>
					<button onclick="test1408()">立即执行函数</button>
					<button onclick="test1409()">匿名函数</button>
					<button onclick="test1410()">表达式函数</button>
				</section>
				<section>
					<h3>作用域</h3>
					<button onclick="test1501()">全局作用域</button>
					<button onclick="test1502()">函数作用域</button>
					<button onclick="test1503()">块作用域</button>
					<button onclick="test1504()">作用域链</button>
				</section>
				<section>
					<h3>闭包</h3>
					<button onclick="test1601()">普通闭包</button>
					<button onclick="test1602()">模块闭包</button>
					<button onclick="test1603()">定时器闭包</button>
					<button onclick="test1604()">事件闭包</button>
					<button onclick="test1605()">let 块闭包</button>
				</section>
				<section>
					<h3>对象</h3>
					<button onclick="test1701()">构造函数</button>
					<button onclick="test1702()">显式原型</button>
					<button onclick="test1703()">隐式原型</button>
					<button onclick="test1704()">原型链</button>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>类</h3>
					<button onclick="test1801()">传统构造函数</button>
					<button onclick="test1802()">ES6类</button>
				</section>
				<section>
					<h3>模块</h3>
					<button onclick="test1901()">立即执行函数</button>
					<button onclick="test1904()">CommonJS-NodeJS,Browserify</button>
					<button onclick="test1902()">CMD-seaJS</button>
					<button onclick="test1903()">AMD-requireJS</button>
					<button onclick="test1904()">ES6模块</button>
					<button onclick="test1905()">静态导入import</button>
					<button onclick="test1906()">动态导入import()</button>
					<br />
					<button>单独导出 export </button>
					<button>整体导出 export {}</button>
					<button>默认导出 export default</button>
					<br />
					<button id="b1921" onclick="test1921()">通用导入 import * as xxx</button>
					<button>解构赋值导入 import {a,b}</button>
					<button>导入默认的导出 import xxx</button>
					<script type="module">
						// 导入方式1: * 导入
						import * as m1 from "./m1.js";

						// 导入方式2: 解构赋值导入
						import {
							getAll,
							create,
							add,
							remove as removeGood, // 重命名
							clear as clearGood
						} from "./m1.js";
						// 导入默认的导出
						import {
							default as m2
						} from "./m1.js";

						// 导入方式3: 导入默认的导出，对应 export default，其它 export 无效
						import m3 from "./m1.js";

						// document.getElementById("b1921").onclick = function() {
						// 	var phone = m1.create("iPhone", 4000);
						// 	m1.add(phone);
						// 	var all = m1.getAll();
						// 	m1.remove(0);
						// 	m1.clear();

						// }
					</script>
				</section>
				<section>
					<h3>反射与代理</h3>
					<button onclick="test2001()">Object 方法</button>
					<button onclick="test2002()">Reflect 方法</button>
					<button onclick="test2003()">Proxy</button>
				</section>
				<section>
					<h3>定时器</h3>
					<button onclick="test2101()">定点运行</button>
					<button onclick="test2102()">定期运行</button>
					<button onclick="test2103()">下轮运行</button>
					<button onclick="test2104()">函数防抖</button>
					<button onclick="test2105()">函数节流</button>
				</section>
				<section>
					<h3>异步任务</h3>
					<button onclick="test2201()">定时器回调</button>
					<button onclick="test2202()">事件回调</button>
					<button onclick="test2203()">Ajax回调</button>
					<button onclick="test2204()">Promise</button>
					<button onclick="test2205()">Generator</button>
					<button onclick="test2206()">async/await</button>
					<button onclick="test2207()">Promise.all</button>
					<button onclick="test2208()">Promise.allSettled</button>
				</section>
				<section>
					<h3>Ajax 网络请求</h3>
					<button onclick="test2301()">Get</button>
					<button onclick="test2302()">Post</button>
					<button onclick="test2303()">跨域访问</button>
				</section>
				<section>
					<h3>DOM 与 BOM</h3>
				</section>
			</div>
			<div class="col-1">
			</div>
		</div>
		<script>

		</script>
	</body>
</html>
